<template>
    <el-row class="main-cont padd20">
        <el-row class="box mb20">
            <span class="xqjhtext">学期</span>
            <el-select v-model="xnxq" placeholder="选择学期" @change="selectXnxq" class="text">
                <el-option v-for="(item,index) in xnxqList" :key="index" :label="`${item.xn}${item.xq}`"
                    :value="`${item.xn}${item.xq}`"></el-option>
            </el-select>
            <div class="btn">
                <el-button v-if="plan.status !=`1`" class="reset-comfirm-btn" style="margin-left: 10px;"
                    @click="refplan">+引用</el-button>
            </div>
        </el-row>
        <el-steps :active="active" align-center finish-status="success" simple style="margin-top: 20px">
            <el-step :title="step1"></el-step>
            <el-step :title="step2"></el-step>
            <el-step :title="step3"></el-step>
        </el-steps>

        <el-row class="mt20 padd20 waike" style="display: flex; justify-content: space-between;">
            <el-col :span="7">
                <el-col :span="24" class="list" v-if="cous == null" style="cursor: pointer;">
                    <div class="grid-content xzld" @click="handleSelectCourse()">
                        <i class="el-plus">+</i>
                        <span class="">选择劳动课程</span>
                    </div>
                </el-col>
                <el-col :span="24" class="list" v-if="cous != null">
                    <div class="grid-content bg-white">
                        <div class="tl kech">
                            <span>课程计划</span>
                            <span class="cp cje" @click="handleSelectCourse()" v-if="xzsjShow">更改</span>
                        </div>
                        <div class="grid-kech box box-align-center ">
                            <div class="keche">
                                <el-image :src="cous.image" class="icon-image" fit="cover"></el-image>
                            </div>
                            <div class="cousinfo box box-tb box-align-start">
                                <h4 style="font-size: 18px;margin-bottom: 15px;" :title="cous.name">{{cous.name}}</h4>
                                <span>（共{{cous.cnt}}章）</span>
                                <span style="width: 235px;" class="over-hidden tl">主编： {{cous.chiefEditor}}</span>
                            </div>
                            <!-- <div class="title-delete">
                                      <span class="title">{{cous.material}}</span>
                                      <span class="delete cp" @click="handleSelectCourse()" v-if="xzsjShow">更改</span>
                                </div> -->
                        </div>
                    </div>
                </el-col>
            </el-col>
            <el-col :span="7">
                <div v-if="sjListShow">
                    <div
                        style="border: 1px solid #f1f1f1;border-radius: 10px; margin-right: 10px;height: 500px;padding-right:10px; ">
                        <div class="tl sj-top">
                            <span>实践计划 共 {{ldsjlist.length}} 项</span>
                            <el-button @click.native="handleSelectSj()" icon="el-icon-plus" circle></el-button>
                            <!-- <el-button v-if="plan.status !=`1` && maxrole!='team'" class="reset-comfirm-btn" style="margin-left: 10px;"
                                                @click="refplan">+引用</el-button> -->
                        </div>
                        <div class="overy">
                            <el-row class="ldsj ldsjlist box" v-for="(item,i) in ldsjlist" :key="i"
                                v-if="ldsjlist.length>0">
                                <span>{{i+1}}</span>
                                <div style="background: rgba(232, 232, 232, 0.2);border-radius: 12px; width: 100%; height: 100px;"
                                    class="deletely box">
                                    <span class="delete cp" @click="handleDelete(item)" v-if="xzsjShow">移除</span>
                                    <!-- <span class="delete cp" @click="handleDelete(item)">移除</span> -->
                                    <!-- v-if="xzsjShow" -->
                                    <el-col :span="8" class="sjjh">
                                        <el-image :src="item.img" class="sj-img" fit="cover"></el-image>
                                    </el-col>
                                    <el-col :span="14">
                                        <div style="overflow: hidden;">
                                            <span class="sjbiaoti">{{item.title}}</span>
                                            <span class="title" v-if="item.type == '0'">日常生活劳动</span>
                                            <span class="title" v-if="item.type == '1'">生产劳动</span>
                                            <span class="title" v-if="item.type == '2'">服务性劳动</span>
                                        </div>
                                        <div>
                                            <div class="ldmb-cont tl">劳动目标：{{item.ldmb}}</div>
                                        </div>
                                    </el-col>
                                    <el-row v-if="ldsjlist.length==0" style="height: 500px;">
                                        <el-empty description="暂无记录"></el-empty>
                                    </el-row>
                                </div>
                            </el-row>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="7" style="border: 1px solid #f1f1f1;border-radius:10px;">
                <div class="btn" style="display: flex; justify-content: center; align-items: center;">
                    <el-button icon="el-icon-check" class="reset-comfirm-btn" @click="pubPlan()"
                        v-if="plan.status ==`1`" :disabled="plan.status ==`1` || cous==null || ldsjlist.length==0">
                        已发布
                    </el-button>
                    <el-button class="reset-comfirm-btn" @click="pubPlan()"
                        v-else-if="cous==null || ldsjlist.length==0">
                        发布
                    </el-button>
                    <el-button class="reset-comfirm-btn" @click="pubPlan()" v-else>
                        发布
                    </el-button>
                </div>
            </el-col>
        </el-row>

        <addKcrw :dialogVisible="kcShow" @clickClose="clickKcClose()" :title="title" ref="child" @saveCous="saveCous">
        </addKcrw>
        <addSjrw :dialogVisible="sjShow" @clickClose="clickSjClose()" :planid="plan.id" :title="title2" ref="child2"
            @saveSjrw="saveSjrw">
        </addSjrw>

    </el-row>
</template>

<script>
    import addKcrw from './components/addKcrw.vue';
    import addSjrw from './components/addSjrw.vue';
    export default {
        components: {
            addKcrw,
            addSjrw
        },
        data() {
            return {
                sjListShow: false,
                xzsjShow: true,
                active: 0,
                ldsjidsList: [],
                xnxqList: [],
                xnxq: '',
                plan: {
                    id: null,
                    sjNum: 0,
                    status: ''
                },
                checked: false,

                selectVal: '',
                searchText: '',
                title: '选择课程',
                title2: '选择实践',
                loginInfo: this.$store.state.loginInfo,
                tabList: [{
                        title: "课程任务"
                    },
                    {
                        title: "实践任务"
                    }
                ],
                current: 0,
                num: 1,
                cous: null,
                ldsjlist: [],
                kcShow: false,
                sjShow: false,
                step1: '1 劳动课程-待添加',
                step2: '2 劳动实践-待添加',
                step3: '3 教学计划-待发布',
                schoolid: this.$store.state.schoolId,
            };
        },
        mounted() {
            this.jyzXnxqlist();
        },
        methods: {
            refplan() {
                this.$confirm('本操作将直接引用服务团队的教学计划，请确认是否继续引用?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.sureref();
                }).catch(() => {

                });
            },
            sureref() {
                this.$ajax.post('/yteachplan/refplan', {
                    schoolid: this.schoolid
                }).then(res => {
                    if (res.code == '0') {
                        this.$message({
                            message: '成功引用教学计划！',
                            type: 'success'
                        });
                        this.jyzXnxqlist();
                    } else {
                        this.$message.error('请求失败！');
                    }
                })
            },
            jyzXnxqlist() {
                this.$ajax.post('/dclass/jyzXnxqlist', {
                    schoolid: this.schoolid
                }).then(res => {
                    if (res.code == '0') {
                        this.xnxqList = res.list;
                        let _this = this;
                        this.xnxqList.forEach(function(item, index) {
                            if (item.isCur == 1) {
                                _this.xnxq = item.xn + item.xq;
                            }
                        })
                        this.getTeachPlanInfo();
                    } else {
                        this.$message.error('请求失败！');
                    }
                })
            },
            getTeachPlanInfo() {
                let params = {
                    schoolId: this.schoolid,
                    xn: this.xnxq.substring(0, 9),
                    xq: this.xnxq.substring(9, 12),
                };
                this.$ajax.post('yteachplan/getTeachPlanInfo', params).then(res => {
                    console.log(res)
                    if (res.code == '0') {
                        this.cous = res.cous;
                        this.ldsjlist = res.ldsjlist;
                        console.log(this.cous)
                        if (res.plan == null) {
                            this.active = 0;
                            this.xzsjShow = false;
                            this.plan = {
                                id: null,
                                sjNum: 0,
                                status: ''
                            }
                        } else {
                            this.sjListShow = true;
                            this.plan = res.plan;
                            if (this.plan.sjNum != 0) {
                                this.checked = true;
                            }
                            if (this.plan.status == `1`) {
                                this.active = 3;
                                this.step1 = "1 劳动课程-已添加";
                                this.step2 = "2 劳动实践-已添加";
                                this.step3 = "3 教学计划-已发布";
                                this.xzsjShow = false;
                            } else {
                                if (this.ldsjlist.length == 0) {
                                    this.active = 1;
                                    this.step1 = "1 劳动课程-已添加";
                                    this.xzsjShow = true;
                                } else {
                                    this.active = 2;
                                    this.step2 = "2 劳动实践-已添加";
                                }
                            }
                        }
                    } else {
                        this.$message.error('请求失败！');
                    }
                })
            },
            saveCous(cous) {
                this.cous = cous;
                var param = {
                    planid: this.plan.id,
                    schoolid: this.schoolid,
                    xn: this.xnxq.substring(0, 9),
                    xq: this.xnxq.substring(9, 12),
                    cousid: this.cous.id
                };
                this.$api.jyz.saveCousTask(param).then(res => {
                    if (res.code == '0') {
                        this.getTeachPlanInfo();
                    } else {
                        this.$message.error('操作失败！');
                    }
                })
            },
            saveSjrw(sjlist) {
                var _this = this;
                sjlist.forEach(function(item, index) {
                    _this.ldsjidsList.push(item.id);
                })

                var param = {
                    planid: _this.plan.id,
                    ldsjids: _this.ldsjidsList
                };
                _this.$api.jyz.saveSjTask({
                    str: JSON.stringify(param)
                }).then(res => {
                    if (res.code == '0') {
                        _this.getTeachPlanInfo();
                        _this.$message.success('添加成功！');
                    } else {
                        _this.$message.error('请求失败！');
                    }
                })
            },
            handleDelete(item) {
                this.$confirm('是否移除【' + item.title + '】', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var param = {
                        planid: this.plan.id,
                        ldsjid: item.id
                    };
                    this.$api.jyz.delSjTask(param).then(res => {
                        if (res.code == '0') {
                            this.getTeachPlanInfo();
                            this.$message.success('删除成功！');
                        } else {
                            this.$message.error('请求失败！');
                        }
                    })
                }).catch(() => {

                });
            },
            selectXnxq(e) {
                this.step1 = "1 劳动课程-待添加";
                this.step2 = "2 劳动实践-待添加";
                this.step3 = "3 教学计划-待发布";
                this.xnxq = e;
                this.getTeachPlanInfo();
            },
            handleSelectCourse() {
                this.$refs.child.getCourseList();
                this.kcShow = true;
            },
            handleSelectSj() {
                this.$refs.child2.notPlanLdsj();
                this.sjShow = true;
            },
            pubPlan() {
                this.$confirm('教学计划一经发布不可修改，请确认是否发布', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$api.jyz.publish({
                        id: this.plan.id,
                        sjNum: this.plan.sjNum
                    }).then(res => {
                        if (res.code == '0') {
                            this.getTeachPlanInfo();
                            this.$message.success('操作成功！');
                        } else {
                            this.$message.error('请求失败！');
                        }
                    })
                }).catch(() => {

                });

            },
            clickAdd() {},
            clickKcClose() {
                this.kcShow = false
            },
            clickSjClose() {
                this.sjShow = false
            }
        }
    }
</script>

<style scoped lang="scss">
    .btn {
        height: 100%;
    }

    .cje {
        text-align: center;
        width: 46px;
        height: 24px;
        background: #FFFFFF;
        border: 1px solid #FF5A77;
        border-radius: 12px;
        color: #FF5A77;
    }

    .delete {
        // transform: scale(0.5);
        opacity: 1;
        // transition: transform 1s linear;
        position: absolute;
        right: 5px;
        bottom: 5px;
        // display: none;
        width: 46px;
        height: 24px;
        background: #FFFFFF;
        border: 1px solid #FF5A77;
        border-radius: 12px;
        color: #FF5A77;
    }

    // .deletely{
    //    &:hover>.delete {
    //         // display: block;
    //         opacity: 1;
    //         transform:scale(1);
    //         transition: transform 3s;
    //   }
    // }
    // .grid-kech{
    //     &:hover>.delete {
    //         opacity: 1;
    //         transform:scale(1);
    //         transition: transform 3s;
    //     }
    // }
    .overy {
        overflow-y: auto;
        height: 450px;
    }

    .grid-kech {
        background-color: #F3F5FA;
        height: 96px;
    }

    .grid-kech::-webkit-scrollbar {
        width: 4px;
        /*height: 4px;*/
    }

    .grid-kech::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: rgba(0, 0, 0, 0.2);
    }

    .grid-kech::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 0;
        background: rgba(0, 0, 0, 0.1);

    }

    /*滚动条样式*/
    .overy::-webkit-scrollbar {
        width: 4px;
        /*height: 4px;*/
    }

    .overy::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: rgba(0, 0, 0, 0.2);
    }

    .overy::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 0;
        background: rgba(0, 0, 0, 0.1);

    }

    .sjjh {
        padding-left: 10px;
        height: 100px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .sj-img {
            width: 114px;
            height: 100%;
        }
    }

    .sj-top {
        display: flex;
        justify-content: space-between;

        >span {
            display: block;
            margin: 10px;
        }

        >.el-button {
            margin: 10px;
            padding: 8px;
        }

    }

    .kech {
        margin: 12px 12px;
        display: flex;
        justify-content: space-between;
    }

    // .bg-white {
    //     background: #F3F5FA;
    // }

    .keche {
        width: 148px;
        min-width: 148px;
        height: 96px;
        position: relative;
        margin-bottom: 10px;
        background: #F3F5FA;
        border-radius: 12px;
        display: flex;
        justify-content: space-between;
        // &:hover>.delete {
        //       // display: block;
        //       opacity: 1;
        //       transform:scale(1);
        //       transition: transform 3s;
        // }
        // >.delete{
        //     position: absolute;
        //     bottom:30px;
        //     right: 5px;
        // }
    }

    .icon-image {
        height: 100%;
        width: 100%;
    }

    .word-ke {
        margin: 10px 0;
    }

    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }


    .maxwidth {
        max-width: 1400px;
        // margin: 20px auto !important;
        margin-left: 120px !important;
    }

    .list {
        &:first-child {
            .grid-content {
                // border: 1px dotted #6473F9;
            }
        }
    }

    .tab {
        width: 158px;
        height: 42px;
        line-height: 42px;
        border-radius: 14px;
        border: 1px solid #E5E6F1;
        background-color: #fff;
        font-size: 18px;

        &:first-child {
            border-radius: 14px 0px 0px 14px;
        }

        &:last-child {
            border-radius: 0px 14px 14px 0px;
            border-left: none;
        }

        &.active {
            background: #626BF1;
            color: #fff;
        }
    }

    .xzld {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .grid-content {
        padding: 0 10px;
        // min-width: 360px;
        height: 500px;
        border: 1px solid #ebebeb;
        border-radius: 12px;
        transition: .3s ease-in-out;

        .el-plus {
            display: inline-block;
            width: 32px;
            height: 32px;
            line-height: 32px;
            background: linear-gradient(-13deg, #626BF1, #989BFA);
            border-radius: 16px;
            color: #fff;
            font-size: 26px;
            font-style: normal;
        }


        // .img {
        //     width: 148px;
        //     height: 96px;
        //     border-radius: 12px;
        // }

        // .right {
        //     height: 96px;

        //     .title {
        //         width: 134px;
        //         height: 20px;
        //         background: #F3F4FB;
        //         border-radius: 9px;
        //         color: #939FF4;
        //         font-size: 14px;
        //     }

        //     .delete {
        //         display: none;
        //         width: 46px;
        //         height: 24px;
        //         background: #FFFFFF;
        //         border: 1px solid #FF5A77;
        //         border-radius: 12px;
        //         color: #FF5A77;
        //     }
        // }

        // &:hover {
        //     border: 1px solid #BEBDE6;
        //     box-shadow: 2px 6px 13px 0px rgba(225, 227, 245, 0.69);

        //     .delete {
        //         display: block;
        //     }
        // }
    }


    .user-list>>>.el-checkbox {
        width: 249px;
        margin-right: 0;
        display: flex;
        justify-content: flex-start;
    }

    .user-list>>>.el-checkbox__label {
        .list {
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            color: #000000;
        }
    }

    .user-list>>>.el-checkbox__input {
        display: flex;
        align-items: center;
    }

    .user-list>>>.el-checkbox__input.is-checked .el-checkbox__inner {
        background-color: #626BF1;
        border-color: #626BF1;
    }

    .user-list>>>.el-checkbox__inner:hover {
        border-color: #626BF1;
    }

    .user-list>>>.el-checkbox__input.is-focus,
        {
        border-color: #626BF1;

        .el-checkbox__inner {
            border-color: #626BF1;
        }
    }

    .user-list>>>.el-input-number--mini {
        width: 86px;
    }

    h3 {
        font-size: 24px;
        width: 235px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: left;
    }


    .title {
        float: right;
        display: block;
        // margin: 15px 0 0 100px;
        width: 100px;
        height: 27px;
        line-height: 27px;
        background: #eef0f8;
        border-radius: 9px;
        color: #80858b;
        font-size: 12px;
        position: absolute;
        right: 5px;
        top: 5px;
    }

    .ldmb {
        font-size: 13px;
        color: #B8BDCA;
    }

    .ldmb-cont {
        width: calc(100% - 100px);
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        font-size: 13px;
        margin-left: 15px;
    }

    .xqjhtext {
        margin: 8px 20px 0 20px;
        font-weight: bold;
    }

    // .ldsj{
    //     padding: 5px;
    //     // transition: .3s ease-in-out;
    // }
    .el-steps--simple {
        background: #FFFFFF;
    }

    .ldsjlist {
        position: relative;
        height: 100px;
        display: flex;
        margin-bottom: 10px;
        // height: 500px;
        overflow: auto;
        transition: .3s ease-in-out;

        >span {
            text-align: center;
            padding: 0 5px;
            width: 45px;
            min-width: 45px;
            display: block;
            line-height: 100px;
        }
    }

    .sjbiaoti {
        font-size: 14px;
        font-weight: bold;
        display: block;
        text-align: left;
        padding-left: 15px;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .cousinfo {
        padding-left: 10px;
        width: 63%;
        overflow: hidden;
        // width: 63%;
        // display: inline-block;

        &>h4 {
            height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

        }
    }
</style>
